<template>
  <div class="q-pa-md">
    <div style="color: blue">
      <fieldset>
        <legend>quickItems</legend>
        <button @click="handlershowAutoFilterRow">
          showAutoFilterRow
          <!-- ({{ fasrTreeList.showAutoFilterRow}}) -->
        </button>
        <div>
          <q-checkbox v-model="recursive" /> 递归
        </div>
        <div>
          <q-checkbox v-model="allowSelectAll" /> 全选
        </div>
        <div>
          <q-checkbox v-model="allowColumnResizing" /> 调整列宽
        </div>
        <div>
          <q-checkbox v-model="lazyItems" /> 懒加载
        </div>
        <fieldset>
          <legend>分级码</legend>
          <q-checkbox v-model="IsClassiFicationSteps" /> 固定分级码步长
          <div>
            <q-input v-if="IsClassiFicationSteps" v-model="ClassiFicationStep"></q-input>
            <q-input v-if="!IsClassiFicationSteps" v-model="ClassiFicationStepRule"></q-input>
          </div>
        </fieldset>
        <button @click="debuggerHandler">DEBUGGER</button>
        <button @click="() => { dataSource = [] }">Clear</button>
        <button @click="loadRoot">Root</button>
        <button @click="() => { fasrTreeList.query() }">查询</button>
        <t-select v-model="selectMode" :options="[
          { label: 'single', value: 'single' },
          { label: 'multiple', value: 'multiple' },
          { label: 'none', value: 'none' }]"></t-select>
        {{ selectMode }}
        <t-tree-list height="500" ref="fasrTreeList" :selectMode='selectMode' :columnMinWidth="100"
          :recursiveSelection="recursive" :allowSelectAll="allowSelectAll" columnResizingMode="widget"
          :lazyItems="lazyItems" dataStructure="plain_level" :allowColumnResizing="allowColumnResizing"
          :showAutoFilterRow="showAutoFilterRow" :optColumns=optColumns :rows="dataSource" levelKeyExpr="Code"
          hasItemsExpr="IsLeaf" rootValue="0" :isClassiFicationSteps="IsClassiFicationSteps"
          :classiFicationStep="ClassiFicationStep" :classiFicationStepRule="ClassiFicationStepRule" :loading="loading"
          :enableCmdCol='true' @request="request" @lazyLoad="lazyLoad">
        </t-tree-list>
      </fieldset>
    </div>
  </div>
</template>

<script>

import { result, transform } from 'lodash';
import { computed, ref, onMounted } from 'vue';
import { tasks, employees, priorities } from './data.ts';
import tree from './tree.json';
import levelTree from './levelTree.json';

import { DxColumn, DxFilterRow, DxColumnFixing } from 'devextreme-vue/tree-list';

export default {
  components: {
    DxColumn,
    DxFilterRow,
    DxColumnFixing
  },
  setup() {

    function flattenTree(tree) {
      let flattened = [];

      function traverse(node, PID) {
        flattened.push({ ...node, PID: PID, _hasChildCode_: node.children.length != 0 });
        if (node.children && node.children.length > 0) {
          node.children.forEach(child => traverse(child, node.ID));
        }
      }

      tree.forEach(node => traverse(node, "0"));

      return flattened;
    }

    const treeData = flattenTree(tree.users);

    const lazyLoad = (lazyCode) => {
      let len = lazyCode.split("_").length - 1;
      let startsWith = lazyCode.replace(/_/g, "");

      return levelTree.filter(f => {
        if (startsWith.length === 0) {
          return f.Code.length === lazyCode.length
        } else {
          return _.startsWith(f.Code, startsWith) && f.Code.length === lazyCode.length
        }
      })
    }

    // const dataSource = ref(lazyLoad("0"));
    const dataSource = ref([]);

    const columns = ref(['Name', 'Code'].map(key => ({
      dataField: key,
      caption: key,
      width: '100px',
    })))

    const fasrTreeList = ref(null);

    let Widget = {};
    onMounted(() => {
      Widget.fasrTreeList = fasrTreeList.value;
      window.Widget = Widget;
    });

    const handlershowAutoFilterRow = () => {
      Widget.fasrTreeList.showAutoFilterRow = !Widget.fasrTreeList.showAutoFilterRow;
    }



    const vm = {
      dataSource,
      fasrTreeList,
      optColumns: ref([
        {
          "ID": "ID",
          "dataField": "ID",
          "caption": "主键ID",
          "dataType": "String",
          "isShow": true,
          "groupIndex": "",
          "ExprExt": {},
          "linkFormat": "",
          "enumDisp": {},
          "hintConf": {},
          "expanded": true,
          "RefSchemaExpr": "Schema.DQ.DQ_PCR_Code.Sources.DO_Codes.Columns.ID",
          "ValueInfo_caption": {
            "ShowValue": "主键ID",
            "ReferenceExpr": "Schema.DQ.DQ_PCR_Code.Sources.DO_Codes.Columns.ID.Text",
            "Type": 0
          },
          "ValueInfo_dataType": {
            "ShowValue": "String",
            "ReferenceExpr": "Schema.DQ.DQ_PCR_Code.Sources.DO_Codes.Columns.ID.DataType",
            "Type": 0
          },
          "originalName": "ID",
          "tableAlias": "DO_Codes"
        },
        {
          "ID": "Code",
          "dataField": "Code",
          "caption": "编号",
          "dataType": "String",
          "isShow": true,
          "groupIndex": "",
          "ExprExt": {},
          "linkFormat": "alert(1)",
          "enumDisp": {
            "showMode": "icon",
            "textAlign": "left",
            "valMapping": true,
            "enumRanges": [
              {
                "val": "11",
                "text": "113333",
                "icon": "",
                "color": "",
                "iconColor": "rgba(0,120,212,1.00)",
                "bgColor": "",
                "UUID": "8068d51d-2aad-b3d1-7bd1-2d68f886efe9",
                "ValueInfo_text": "Schema.Page.PageOutCodeTreeListLevelTree.Controls.fasr_tree_list.GridData.enumRanges.Code.item8068d51d_2aad_b3d1_7bd1_2d68f886efe9.text"
              }
            ]
          },
          "hintConf": {
            "icon": "fas dx-icon icon-t-question-circle",
            "message": "22222",
            "enable": true,
            "ValueInfo_message": "Schema.Page.PageOutCodeTreeListLevelTree.Controls.fasr_tree_list.hintConf.ID.message"
          },
          "expanded": true,
          "RefSchemaExpr": "Schema.DQ.DQ_PCR_Code.Sources.DO_Codes.Columns.Code",
          "ValueInfo_caption": {
            "ShowValue": "编号",
            "ReferenceExpr": "Schema.DQ.DQ_PCR_Code.Sources.DO_Codes.Columns.Code.Text",
            "Type": 0
          },
          "ValueInfo_dataType": {
            "ShowValue": "String",
            "ReferenceExpr": "Schema.DQ.DQ_PCR_Code.Sources.DO_Codes.Columns.Code.DataType",
            "Type": 0
          },
          "originalName": "Code",
          "tableAlias": "DO_Codes"
        },
        {
          "ID": "Name",
          "dataField": "Name",
          "caption": "名称",
          "dataType": "String",
          "isShow": true,
          "groupIndex": "",
          "ExprExt": {},
          "linkFormat": "alert(1)",
          "enumDisp": {},
          "hintConf": {},
          "expanded": true,
          "RefSchemaExpr": "Schema.DQ.DQ_PCR_Code.Sources.DO_Codes.Columns.Name",
          "ValueInfo_caption": {
            "ShowValue": "名称",
            "ReferenceExpr": "Schema.DQ.DQ_PCR_Code.Sources.DO_Codes.Columns.Name.Text",
            "Type": 0
          },
          "ValueInfo_dataType": {
            "ShowValue": "String",
            "ReferenceExpr": "Schema.DQ.DQ_PCR_Code.Sources.DO_Codes.Columns.Name.DataType",
            "Type": 0
          },
          "originalName": "Name",
          "tableAlias": "DO_Codes"
        },
        {
          "ID": "Type",
          "dataField": "Type",
          "caption": "分类",
          "dataType": "String",
          "isShow": true,
          "groupIndex": "",
          "ExprExt": {},
          "linkFormat": "",
          "enumDisp": {},
          "hintConf": {},
          "expanded": true,
          "RefSchemaExpr": "Schema.DQ.DQ_PCR_Code.Sources.DO_Codes.Columns.Type",
          "ValueInfo_caption": {
            "ShowValue": "分类",
            "ReferenceExpr": "Schema.DQ.DQ_PCR_Code.Sources.DO_Codes.Columns.Type.Text",
            "Type": 0
          },
          "ValueInfo_dataType": {
            "ShowValue": "String",
            "ReferenceExpr": "Schema.DQ.DQ_PCR_Code.Sources.DO_Codes.Columns.Type.DataType",
            "Type": 0
          },
          "originalName": "Type",
          "tableAlias": "DO_Codes"
        }
      ]),
      columns: ref(['Name', 'Code'].map(key => ({
        dataField: key,
        caption: key,
        width: '100px',
      }))),
      lazyItems: ref(false),
      allowColumnResizing: ref(false),
      showAutoFilterRow: ref(false),
      selectMode: ref('none'),
      recursive: ref(false),
      allowSelectAll: ref(false),
      handlershowAutoFilterRow,
      debuggerHandler() {
        alert("debugger")
        debugger;
      },
      IsClassiFicationSteps: ref(true),
      ClassiFicationStep: ref(2),
      ClassiFicationStepRule: ref("2-3-3"),
      /** 出码取数逻辑 */
      loading: ref(false),
      request() {
        if (vm.lazyItems.value) {
          vm.loadRoot();
        } else {
          vm.dataSource.value = levelTree;
        }



      },
      loadRoot() {
        debugger;
        vm.loading.value = true;
        setTimeout(() => {
          console.log(Widget.fasrTreeList.getQuickFilter(`{
    "ElementType": "Group",
    "Filters": [{
            "ElementType": "Filter",
            "Code": "DO_Codes.Code",
            "Condition": "fixedlengthcontains",
            "Value": "1101__"
        }
    ]
}`))
          let lazyData = lazyLoad(Widget.fasrTreeList.getLazyCode())
          vm.dataSource.value = lazyData
          vm.loading.value = false;
        }, 1000);
      },
      lazyLoad() {
        debugger;
        vm.loading.value = true;
        setTimeout(() => {
          console.log(Widget.fasrTreeList.getQuickFilter(`{
    "ElementType": "Group",
    "Filters": [{
            "ElementType": "Filter",
            "Code": "DO_Codes.Code",
            "Condition": "fixedlengthcontains",
            "Value": "1101__"
        }
    ]
}`))
          let lazyData = lazyLoad(Widget.fasrTreeList.getLazyCode())
          vm.dataSource.value = [...vm.dataSource.value, ...lazyData]
          vm.loading.value = false;
        }, 1000);
      }
    };
    return vm;
  },
};
</script>
